{% extends 'base.html' %}

{% block breadcrumb_current %}
    物料参数 > 物料类别管理
{% endblock %}

{% block content %}
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            物料类别
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end" style="margin-left: 15px;">返回首页</a>
            {% if user.can_add_device %}
            <a href="{% url 'materialtype_add' %}" class="btn btn-secondary btn-sm float-end">新增类别</a></h5>
            {% endif %}
        </div>
    <div>
<div class="container mt-4">
    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th scope="col">物料类别</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for materialtype in materialtypes %}
            <tr class="custom-row-color">
                <td>{{ materialtype.materialtype }}</td>
                <td>
                    <a href="#" class="text-info text-decoration-none">编辑</a>
                    <a href="#" class="text-danger text-decoration-none ms-2" onclick="return confirm('确定要删除{{materialtype.materialtype}}这个类别吗？')">删除</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="2" class="text-center">暂无物料类别信息</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% for materialtype in materialtypes %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ materialtype.materialtype }}</h5>
                <a href="#" class="btn btn-primary me-2">编辑</a>
                <a href="#" class="btn btn-danger" onclick="return confirm('确定要删除{{materialtype.materialtype}}这个类别吗？')">删除</a>
            </div>
        </div>
        {% empty %}
        <div class="card mb-3">
            <div class="card-body text-center">
                暂无物料类别信息
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>
</div>
{% endblock %}